<template>
  <div class="box">
    <el-card class="card">
      <div class="title">
        总数: {{ total }}
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          align="center"
          prop="date"
          label="序号">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{scope.row.id}}</p>
              <!--              <p>gvhbjnmkl</p>-->
              <!--              <p>gvhbjnmkl</p>-->
              <!--              <img class="img" src="../../assets/img/huge.jpg" alt="">-->

            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="活动标题">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{scope.row.title}}</p>
              <!--              <p>{{scope.row.mobile}}</p>-->
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="活动图片">
          <template slot-scope="scope">
            <div class="table_div">
              <el-avatar shape="square" :size="50" :src="img_url + scope.row.imgurl"></el-avatar>
              <!--              <p>{{scope.row.nickname}}</p>-->
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="商品名称">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{scope.row.goodsName}}</p>

            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          prop="address"-->
        <!--          label="地址">-->
        <!--          <template slot-scope="scope">-->
        <!--            <div class="table_div">-->
        <!--              <p>{{scope.row.province}}</p>-->
        <!--              <p>{{scope.row.city}}</p>-->
        <!--              <p>{{scope.row.area}}</p>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          prop="address"-->
        <!--          label="订单最终支付价格">-->
        <!--          <template slot-scope="scope">-->
        <!--            <div class="table_div">-->
        <!--              <p>{{scope.row.price}}</p>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          align="center"
          prop="address"
          label="创建时间">
          <template slot-scope="scope">
            <div class="table_div">
              <p>{{parseTime(scope.row.createtime, '{yyyy}-{mm}-{dd} {hh}:{ii}:{ss}')}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="是否开启活动">
          <template slot-scope="scope">
            <div class="table_div">
              <el-button
                type="success"
                v-if="scope.row.isopen == 1"
                @click="orOpenclose(scope.row.id,scope.row.isopen)">是</el-button>
              <el-button
                type="info"
                v-if="scope.row.isopen == 2"
                @click="orOpenclose(scope.row.id,scope.row.isopen)"
              >否</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          align="center"
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <div>
<!--              <el-button type="text">库存</el-button>-->
<!--              <span>|</span>-->
              <el-button type="text" @click="jumpEdit(scope.row.id,scope.row.isopen)">编辑</el-button>
              <span>|</span>
              <el-button type="text" @click="orDelete(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <div class="bottom">
        <!--        <el-button type="primary" @click="jumpAdd()" >新增项目</el-button>-->
        <el-pagination
          background
          :current-page="pageNum"
          :page-sizes="[3, 5, 10, 10000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { getActiveList, orDelete, orOpenclose } from '../../api/active'
  import { IMG_URL } from '../../utils/global'
  import { parseTime } from '../../utils'
  import { goodsDel, isOpenclose } from '../../api/goods'

  export default {
    name: 'activeList',
    data() {
      return {
        tableData: [],
        total: 0,
        pageSize: 10,
        pageNum: 1,

        img_url: IMG_URL
      }
    },
    created() {
      this.getActiveList()
    },
    methods: {

      // 是否开启活动
      orOpenclose(id, isopen) {
        console.log(4444, isopen)
        const data = {
          id: id,
          // eslint-disable-next-line eqeqeq
          isopen: isopen == '1' ? '2' : '1'
        }
        orOpenclose(data).then((res) => {
          console.log('是否开启活动商品', res)
          this.getActiveList()
        })
      },

      // 获取活动列表
      getActiveList() {
        const data = {
          pageNum: 1,
          pageSize: 10
        }
        getActiveList(data).then(res => {
          if (res.code == 0) {
            console.log('获取活动列表', res)
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })

      },

      // 删除商品
      orDelete(id) {
        this.$confirm('此操作将永久删除该活动商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = {
            id: id
          }
          orDelete(data).then(res => {
            console.log(res)
            // eslint-disable-next-line eqeqeq
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.listGoods()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },

      jumpEdit(id,isopen) {
        this.$router.push({
          path: '/active/add',
          query: {
            id: id,
            isopen: isopen,
            back: 1
          }
        })
      },


      // 分页器
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getActiveList()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getActiveList()
        console.log(`当前页: ${val}`)
      },

      // 时间转换器
      parseTime(time, formmat) {
        // eslint-disable-next-line no-undef
        return parseTime(time, formmat)
      }

    }
  }
</script>

<style scoped lang="less">
  .box {
    padding: 20px;

    .card {
      margin-bottom: 20px;
    }

    /*表格*/

    .table_div {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .img {
        width: 40px;
        height: 40px;
      }

    }

    /*total*/

    .title {
      margin: 10px 10px 30px 10px;
      padding: 10px 15px;
      background: #5f8ffe;
      color: white;
      border-radius: 10px;
    }

    /*分页器样式*/

    .bottom {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }


  }

</style>
